<template>
	<view class="create_box">
		<custom-tabs type="c1" :value="value" @change="changeIndex" tab-spacing="30"
			:defaultTextStyle="{'color':'#8B8B8B','font-size': '30rpx'}"
			:activeTextStyle="{color:'#333333','font-weight':500,'font-size': '30rpx'}"
			:activeLineStyle="{'background-color':'#4BB591','height':'4rpx','width': '30rpx'}" fixed="true">
			<custom-tab-pane label="全部" name="c1_1">
				<view class="create_all">
					<view class="list_box" v-for="(item,index) in allList" :key="index" v-if="item.type!=0"
						@click="createAll(index)">
						<view class="image">
							<image :src="item.image"></image>
						</view>
						<view class="title">
							{{item.title}}
						</view>
						<view class="content">
							{{item.content}}
						</view>
					</view>
				</view>
			</custom-tab-pane>
			<custom-tab-pane label="热门" name="c1_2">
				<view class="create_all">
					<view class="list_box" v-for="(item,index) in allList" :key="index" v-if="item.type==1"
						@click="createAll(index)">
						<view class="image">
							<image :src="item.image"></image>
						</view>
						<view class="title">
							{{item.title}}
						</view>
						<view class="content">
							{{item.content}}
						</view>
					</view>
				</view>
			</custom-tab-pane>
			<custom-tab-pane label="媒体写作" name="c1_3">媒体写作</custom-tab-pane>
			<custom-tab-pane label="短视频" name="c1_4">短视频</custom-tab-pane>
			<custom-tab-pane label="教育" name="c1_5">教育</custom-tab-pane>
			<custom-tab-pane label="通用" name="c1_6">通用</custom-tab-pane>
		</custom-tabs>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				value: 0,
				allList: [{
						type: 1,
						image: '/static/create/create_eso.png',
						title: '网站首页SEO优化',
						content: '按照写作步骤一步步生成文章'
					},
					{
						type: 1,
						image: '/static/create/create_taobao.png',
						title: '产品特性描述',
						content: '生成适用于AI绘画的描述词（prompt)'
					},
					{
						type: 2,
						image: '/static/create/create_lw.png',
						title: '论文大纲',
						content: '试试自定义输入你需要的文案内容吧'
					},
					{
						type: 2,
						image: '/static/create/create_dsp.png',
						title: '短视频带货文案',
						content: '一键生成新媒体文章（大约 30秒）'
					},
					{
						type: 2,
						image: '/static/create/create_xhs.png',
						title: '小红书笔记标题',
						content: '根据输入的关键词生成引人入胜的文章标题'
					},
					{
						type: 2,
						image: '/static/create/create_wx.png',
						title: '文章主题及大纲',
						content: '为你提供文章主题的新灵感 并为其创建推文提纲'
					},
					{
						type: 2,
						image: '/static/create/create_cp.png',
						title: '产品简介',
						content: '生成让人想下单的产品介绍文案'
					},
					{
						type: 2,
						image: '/static/create/create_dy.png',
						title: '抖音带货标题',
						content: '为文章标题和简述进行SEO优化'
					},
					{
						type: 2,
						image: '/static/create/create_xz.png',
						title: '全文写作(步骤式）',
						content: '按照写作步骤一步步生成文章'
					},
					{
						type: 2,
						image: '/static/create/create_xz.png',
						title: 'AI绘画描述词',
						content: '生成适用于AI绘画的描述词（prompt)'
					},
					{
						type: 2,
						image: '/static/create/create_zdy.png',
						title: '自定义输入',
						content: '试试自定义输入你需要的文案内容吧'
					},
					{
						type: 2,
						image: '/static/create/create_xmt.png',
						title: '新媒体全文写作',
						content: '一键生成新媒体文章（大约30秒）'
					}
				]
			}
		},
		methods: {
			createAll(index) {
				console.log(index);
				if (index == 8) {
					uni.navigateTo({
						url: '/pages_create/fullTextWriting/fullTextWriting'
					})
				}
				if (index == 9) {
					uni.navigateTo({
						url: '/pages_create/aiPaintingDescriptor/aiPaintingDescriptor'
					})
				}
				if (index == 10) {
					uni.navigateTo({
						url: '/pages_create/customInput/customInput'
					})
				}
				if (index == 11) {
					uni.navigateTo({
						url: '/pages_create/newMediaWrite/newMediaWrite'
					})
				}
			},
			changeIndex(e) {
				console.log('选中:', e)
			}
		}
	}
</script>

<style lang="scss">
	/deep/.tab-bar::after {
		height: 0rpx !important;
	}

	.create_all {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-evenly;

		.list_box {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			width: 342rpx;
			height: 272rpx;
			background: #FFFFFF;
			margin-bottom: 20rpx;
			box-shadow: 0rpx 0rpx 13rpx 0rpx #EBEBEB;
			padding: 36rpx;
			box-sizing: border-box;

			.image {
				image {
					width: 53.14rpx;
					height: 53.14rpx;
				}
			}

			.title {
				font-size: 29rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
				line-height: 24rpx;
			}

			.content {
				font-size: 23rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #939393;
				line-height: 36rpx;
			}
		}
	}
</style>